<template>
  <view class="index">
		<view class="nav-top">
			<text class="main-text-color font-weight">猪满满</text>
		</view>
		
		<!-- 头部搜索栏 -->
		<view class="nav-tab">
			<view @click="open" style="width:142rpx" class="text-hidden-one">
				<text class="font-md"  :class="regioncolor?'main-text-color':''">{{region?region:'区域'}}</text>
				<image v-show="regioncolor" src="@/static/index/zk01@2x.png" mode=""></image>
				<image v-show="!regioncolor" src="@/static/index/sq01@2x.png" mode=""></image>
			</view>
			<view class="state text-hidden-one" @click="open2" style="width:142rpx;text-center">
				<text class="font-md" :class="buildingcolor?'main-text-color':''">{{statelist?statelist:'状态'}}</text>
				<image v-show="buildingcolor" src="@/static/index/zk01@2x.png" mode=""></image>
				<image v-show="!buildingcolor" src="@/static/index/sq01@2x.png" mode=""></image>
			</view>
			<view class="search-bar">
				 <view class="search-bar-box">
					 <image class="search-span" src="@/static/index/searh.png"/>
					 <input type="text" v-model="contactAddress"  placeholder="查询地址信息" class="search-text" maxlength="10" :focus="false"/>
					 <text class="search-btn" @click="Inquire">查询</text>
				 </view>
			</view>
		</view>
		
		<!-- 区域弹框 -->
		<uni-popup ref="popup" type="bottom" @maskClick="maskClick">
			<view class="bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<block v-for="(item,index) in area" :key="index">
						<view class="d-flex a-center j-center border-bottom main-border-color pt-2 pb-2"  @click="areaNvbuid(index)">
							{{item.fullname}}
						</view>	
					</block>
				</scroll-view>
			</view>	
		</uni-popup>
		
		<!-- 状态弹框 -->
		<uni-popup ref="popups" type="bottom" @maskClick="maskClick">
			<view class="bg-white" style="border-top-left-radius: 12rpx;border-top-right-radius: 12rpx;">
				<scroll-view scroll-y="true" style="height: 500rpx;">
					<block v-for="(item,index) in state" :key="index">
						<view class="d-flex a-center j-center border-bottom main-border-color pt-2 pb-2" @click="stateNavbuid(index)">
							{{item.statusName}}
						</view>	
					</block>
				</scroll-view>
			</view>	
		</uni-popup>
		
		<!-- 地图 -->
		<view class="page-body">
			<view class="page-section page-section-gap" :style="'height:'+scrollH+'px;'">
				<map id="around-food-map" style="width: 100%; height: 100%;"  @tap="address" scale="10" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap">
				</map>
			</view>
			<!-- 地图按钮 -->
			<view class="targeting-list position-absolute top-0 d-flex flex-column" style="top:74rpx;right:30rpx;">
				<view style="width:86rpx;height: 125rpx;" class="position-relative" @click="tabMap">
					<image style="width:86rpx;height: 125rpx;" src="../../static/index/db01@2x.png" ></image>
					<view class="position-absolute" style="top:24rpx;left:20rpx;right: 20rpx;">
						<image style="width: 46rpx;height: 45rpx;" src="../../static/index/dw01@2x.png"></image>
						<text>定位</text>
					</view>
				</view>
				<view style="width:86rpx;height: 125rpx;" class="position-relative" @click="navList">
					<image style="width:86rpx;height: 125rpx;" src="../../static/index/db02@2x.png" ></image>
					<view class="position-absolute" style="top:20rpx;left:20rpx;right: 20rpx;">
						<image style="width: 46rpx;height: 45rpx;" src="../../static/index/jl01@2x.png"></image>
						<text>列表</text>
					</view>
				</view>
			</view>
		</view>
		
		
	 <!-- 	底部tabbar -->
		<NavbarBottom :tabID="tabID"/>

  </view>
</template>

<script>
import {mapMutations} from 'vuex'
import NavbarBottom from "@/components/navbar-bottom.vue"
import map from "@/utils/qqmap-wx-jssdk.js"
export default {
  data() {
		return {
			share: {
				title: '猪满满',
				path: '/pages/index/index',//全局分享的路径，比如 首页
				imageUrl: '',//全局分享的图片(可本地可网络)
			},
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 80.506531,
			longitude: 109.423819,
			scrollH:668,
			area:[],
			state:[],
			city:'',
			statelist:'',
			region:'',//区域
			buildingStatus:"",//状态
			contactAddress:'',//地址,
			regioncolor:false,
			buildingcolor:false,
			covers: []
		}
	},
  components:{NavbarBottom},
	onShow(){
		this.tabMap(),
		this.getmark(),
		this.getbuildingstate()
		this.getdw()
	},
	// 1.发送给朋友
	onShareAppMessage(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
	},
	//2.分享到朋友圈
	onShareTimeline(res) {
		return {
			title: this.share.title,
			path: this.share.path,
			imageUrl: this.share.imageUrl,
		}
	},
  methods: {
		...mapMutations(['setdevelopment','setstate','getposition','currentAddress','dw']),
		navtab(index){
			this.indexactive = index
		},
		maskClick(){
			this.regioncolor = false
			this.buildingcolor = false
		},
		navList(){
			uni.navigateTo({
				url:'/pages/Details/Details'
			})
		},
		//查询
		Inquire(){
			this.getmark('search')
		},
		getbuildingstate(){
			this.$api.getbuildingstate({},false).then(res=>{
				this.state = res.data
				this.setstate(res.data)
			})
		},
		open(){
			this.regioncolor = true
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs.popup.open('bottom')
		},
		open2(){
			this.buildingcolor = true
			this.$refs.popups.open('bottom')
		},
		//区域
		areaNvbuid(i){
			this.region = this.area[i].fullname
			this.$refs.popup.close()
			this.regioncolor = false
			this.getmark()
		},
		//状态
		stateNavbuid(i){
			this.buildingStatus = this.state[i].buildingStatus
			this.statelist = this.state[i].statusName
			this.$refs.popups.close()
			this.buildingcolor = false
			this.getmark()
		},
		getdw(){
			let _this = this;
			uni.getSystemInfo({
				success: function (res) {
					let isdw = res.locationEnabled;
					if(!isdw){
						 _this.dw(false)
						 uni.showModal({
							 title:"定位服务未开启",
							 content:"请打开设置->微信->位置权限才可以使用"
						 })
					}else{
						_this.dw(true)
					}
				}
			});
		},
		tabMap(){
			this.region = "";
			this.statelist="";
			this.buildingStatus="";
			this.contactAddress="";
			this.getmark();
			var _this = this;
			uni.showLoading({
				title: '地图加载中'
			});
			uni.authorize({
				scope: 'scope.userLocation',
				success: () => {
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy:true,
						success: function (res) {
							uni.hideLoading();
							_this.latitude = res.latitude;
							_this.longitude = res.longitude;
							if(_this.latitude&&_this.longitude){
								_this.CurrentPosition()
							}
							_this.getposition({
								'latitude':res.latitude,
								'longitude':res.longitude
							})
							
							
							uni.createMapContext("around-food-map", this).moveToLocation({
								longitude: res.longitude,
								latitude: res.latitude,
							});
							
							
							// 实例化API核心类
							var mapsdk = new map({
								key: 'L7SBZ-YJZCD-CDL4L-PL6KE-F35UZ-MHFZA' // 必填
							});
							mapsdk.reverseGeocoder({
								//Object格式
								location: {
									latitude: res.latitude,
									longitude: res.longitude
								},
								coord_type:4,
								success: (res) => {
									_this.currentAddress(res.result.address)
									_this.city = res.result.ad_info.city;
								},
								fail: (error) => {
										console.error(error);
								}
							});
							
							mapsdk.getCityList({
								success: function(res) {//成功后的回调
									let cityId = "";
									for (let i=0;i<res.result[1].length;i++) {
										if(res.result[1][i].fullname==_this.city){
											cityId = res.result[1][i].id
										}
									}
									// console.log('111',cityId)
									//根据对应接口getCityList返回数据的Id获取区县数据（以北京为例）
									mapsdk.getDistrictByCityId({
										// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
										id: cityId, //对应接口getCityList返回数据的Id，如：北京是'110000'
										success: function(res) {//成功后的回调
										// console.log('2222',res.result[0])
											_this.area = res.result[0];
											console.log(_this.area)
											_this.setdevelopment(res.result[0])
										}
									});
								}
							});
						},
						fail(error) {
							console.log(error)
							let res  = "getLocation:fail 频繁调用会增加电量损耗，可考虑使用 wx.onLocationChange 监听地理位置变化";
							if(error.errMsg == res){
								uni.showToast({
									title:"请勿频繁定位",
									icon:"error",
									success() {
										_this.CurrentPosition()
									}
								})
							}
						}
					})
				}
			})
			
		},
		//将当前定位添加到地图
		CurrentPosition(){
			if(this.latitude&&this.longitude){
				let cur = {}
				cur.id=9999
				//经纬度写反了
				cur.latitude= this.latitude
				cur.longitude= this.longitude
				cur.width=25
				cur.height=31
				cur.iconPath= '/static/dw.png'
				this.covers.push(cur)
			}
		},
		//获取统计楼宇的各个状态拜访次数及地理坐标
		getmark(res){
			if(res=='search' && this.contactAddress==""){
				this.region = "";
				this.buildingStatus="";
				this.statelist="";
			}
			this.$api.getmark({
				region:this.region,
				buildingStatus:this.buildingStatus,
				contactAddress:this.contactAddress
			},false).then(res=>{
				if(!res.data){
					uni.showToast({
						title:res.msg,
						icon:'error'
					})
					this.covers = [];
					return
				}
				let map = []
				if(res.data.length>=1){
					for(let i=0;i<res.data.length;i++){
						let maps = {}
						let buildStatus = 0
						maps.id=i
						//经纬度写反了
						maps.latitude= res.data[i].longitude
						maps.longitude= res.data[i].latitude
						maps.width=25
						maps.height=31
						if(res.data[i].buildingStatus==1){
							buildStatus = `合作中(${res.data[i].visitCount})`
							maps.iconPath= '/static/index/blue01@2x.png'
						}else if(res.data[i].buildingStatus==2){
							buildStatus = `沟通中(${res.data[i].visitCount})`
							maps.iconPath= '/static/index/yel01@2x.png'
						}else if(res.data[i].buildingStatus==3){
							buildStatus = `禁止进入(${res.data[i].visitCount})`
							maps.iconPath= '/static/index/red@2x.png'
						}else if(res.data[i].buildingStatus==4){
							buildStatus = `测试过(${res.data[i].visitCount})`
							maps.iconPath= '/static/index/20220527101540.png'
						}
						maps.callout = {
							'content': buildStatus,
							'color': '#ffffff', //文本颜色
							'fontSize': 16, //文字大小
							'borderRadius': 10, //callout边框圆角
							'bgColor': '#000000', //背景色
							'padding': 5, //文本边缘留白
							'display': 'ALWAYS', //'BYCLICK':点击显示; 'ALWAYS':常显
							'textAlign': 'center', //文本对齐方式。有效值: left, right, center
						}
						map.push(maps)
					}
				}
				this.covers = map
			})
		}
	},
	onLoad() {
		// 获取可视区域高度
		uni.getSystemInfo({
			success: (res) => {
				let navbarH = uni.upx2px(342)
				this.scrollH = res.windowHeight - 164
			}
		})
	}
};
</script>

<style lang='scss' scoped>
	.active{
		color:#F2973C;
	}
	.index{
		position: relative;
		height: 100%;
		.nav-top{
			width: 660rpx;
			height: 138rpx;
			text-align: center;
			display: block;
			line-height: 138rpx;
			padding:50rpx 30rpx 0 60rpx;
			text{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #F2973C;
			}
		}
		.tab-underscore{
			position: absolute;
			left:245rpx;
			right: 237rpx;
			bottom: 28rpx;
			width: 268rpx;
			height: 8rpx;
			background: #333333;
			border-radius: 4rpx;
		}
		.page-body{
			position: relative;
			.targeting-list{
				text{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #333333;
					width: 48rpx;
					display: block;
				}
			}
		}
		.nav-tab{
			width:676rpx;
			height: 66rpx;
			display: flex;
			line-height: 66rpx;
			font-size: 28rpx;
			padding:43rpx 30rpx 32rpx 44rpx;
			background-color: #FFFFFF;
			// position: fixed;
			// z-index:666;
			// top:0;
			image{
				width: 22rpx;
				height: 12rpx;
				margin-left:7rpx;
			}
			/* .state{
				margin-left:88rpx;
			} */
			.search-bar{
				.search-bar-box{
					width: 374rpx;
					height: 66rpx;
					background: #FFFFFF;
					border: 3rpx solid #F5F5F5;
					border-radius: 32rpx;
					display: flex;
					align-items:center;
					/* margin-left:44rpx; */
					.search-span{
						width: 25rpx;
						height: 25rpx;
						margin:0 20rpx;
					}
					.search-btn{
						width: 108rpx;
						height: 51rpx;
						background: #F2973C;
						border-radius: 25rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 300;
						color: #FFFFFF;
						margin-right: 11rpx;
						text-align: center;
						line-height:51rpx ;
					}
				}
			}
		}
	}
</style>
